<template>
    <v-app>
        <v-main>
            <v-container fluid class="d-flex justify-center align-center">
                <v-card class="pa-6 elevation-12">
                    <!-- 支付页面标题 -->
                    <v-card-title class="text-center display-1">微信支付</v-card-title>
                    <v-card-subtitle class="text-center subtitle-1 mb-4">请使用微信扫描二维码完成支付</v-card-subtitle>

                    <!-- 二维码展示区域 -->
                    <div class="d-flex justify-center mb-4">
                        <div ref="qrCodeContainer"></div>
                    </div>

                    <!-- 支付金额和说明 -->
                    <v-card-text class="text-center">
<!--                        <p class="h4">支付金额：<span class="font-weight-bold">{{ paymentAmount }} 元</span></p>-->
                        <p class="body-2">请在规定时间内完成支付，逾期订单将自动取消。</p>
                    </v-card-text>

                    <!-- 返回按钮 -->
                    <v-card-actions class="d-flex justify-center">
                        <v-btn color="primary" @click="goBack()">返回</v-btn>
                    </v-card-actions>
                </v-card>
            </v-container>
        </v-main>
    </v-app>
</template>


<script>
import QRCode from 'qrcode-generator';
import axios from "axios";

export default {
    data() {
        return {
            receivedData: null,
            orderNo: '',
            intervalId:null,
            payUrl: ''
        };
    },
    mounted() {
        this.generateQrCode();
    },
    created() {
        this.receivedData = this.$route.query
        this.payUrl = this.receivedData.qrCodeUrl
        this.orderNo = this.receivedData.orderNo
        this.intervalId =  setInterval(this.fetchStatus, 2000);
    },
    methods: {
        goBack(){
            clearInterval(this.intervalId);
            this.$router.back()
        },
        fetchStatus() {
            axios.post(`/v1/order/payment/check`, {order_no: this.orderNo})
                .then((response) => {
                    if(response && response.data && response.data.code == 200){
                        if(response.data.data === 1){
                            clearInterval(this.intervalId);
                            this.$router.push({ path: `/user` });
                        }
                    }
                })
                .catch(error => {
                    console.error('请求支付状态时出错:', error);
                });
        },
        generateQrCode() {
            // 创建一个二维码对象，纠错级别为 L
            const qr = QRCode(0, 'L');
            // 向二维码对象中添加要编码的内容
            qr.addData(this.payUrl);
            // 生成二维码
            qr.make();
            // 将生成的二维码转换为 HTML 图片标签，尺寸因子为 4
            const qrCodeHtml = qr.createImgTag(4);
            // 将生成的二维码图片标签插入到指定的 DOM 容器中
            this.$refs.qrCodeContainer.innerHTML = qrCodeHtml;
        }
    }
};
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>
